<!-- 功能事件设置 -->
<template>
    <div class="event-function">
        <div class="left-wrap">
            <el-scrollbar ref="pageScrollbarRef" height="100%">
                <div class="list">
                    <template v-for="(item, index) in functionList" :key="index">
                        <div
                            :ref="el => setFunctionItemRef(el, item.addData.action)"
                            :class="{ active: eventData.action === item.addData.action }"
                            class="list-item"
                            @click="onSelectFunction(item)"
                        >
                            <div class="list-item-image">
                                <el-icon :style="{ color: ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#00BABD'][index % 5] }">
                                    <component :is="item.icon" />
                                </el-icon>
                            </div>
                            <div class="list-item-title">
                                {{ item.label }}
                            </div>
                        </div>
                    </template>
                </div>
            </el-scrollbar>
        </div>
        <div class="right-wrap">
            <el-scrollbar height="100%">
                <div class="right-content">
                    <function-preview v-model:eventData="eventData" />
                </div>
            </el-scrollbar>
        </div>
    </div>
</template>

<script>
import { defineComponent, toRefs, ref, computed, nextTick } from 'vue'
import { useEditStore } from '@/store'
import { deepClone } from '@/libs/tools'
import useFeature from '@/libs/feature'
import useClickEvents from '../../composables/clickEvents'
import FunctionPreview from './components/function-preview'
export default defineComponent({
    name: 'FunctionSetting',
    components: {
        FunctionPreview
    },
    props: {
        // 事件数据
        eventData: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const { eventData } = toRefs(props)

        const editStore = useEditStore()

        const {
            isHasFeature
        } = useFeature()

        const {
            clickEvents,
            deleteClickEvent
        } = useClickEvents()

        const widgetList = computed(() => editStore.widgetList)
        const selectWidget = computed(() => editStore.selectWidget?.[0]?.widgetData || {})
        const selectWidgetType = computed(() => selectWidget.value?.eles?.type || '')

        const functionList = computed(() => {
            return deepClone(clickEvents.function).filter(item => {
                let status = true
                const { action } = item.addData
                switch (action) {
                    // case 'top':
                    //     // 只允许悬浮窗控件设置回到顶部事件
                    //     status = ['suspension', 'new-suspension'].includes(selectWidgetType.value)
                    //     break;
                    // case 'sidebar-control':
                    //     // 是否存在侧边栏控件
                    //     status = widgetList.value.some(item => item.eles.type === 'sidebar')
                    //     break;
                    // case 'popup-window-control':
                    //     // 是否存在弹窗控件
                    //     status = widgetList.value.some(item => item.eles.type === 'popup-window')
                    //     break;
                    // case 'share':
                    //     // 只允许按钮控件设置分享好友事件，小程序只支持 <button open-type="share"></button> 方式分享好友
                    //     status = selectWidgetType.value === 'button'
                    //     break;
                    // case 'contact':
                    //     // 只允许悬浮窗控件设置客服事件
                    //     status = ['suspension', 'new-suspension'].includes(selectWidgetType.value)
                    //     break;
                    case 'preview-picture':
                        // 只允许图片/图片列表控件设置预览大图事件
                        status = ['picture', 'album'].includes(selectWidgetType.value)
                        break;
                    case 'action-custom':
                        // 只允许拥有 native_publish 权限的账户设置自定义事件
                        status = isHasFeature('native_publish')
                        break;

                    default:
                        break;
                }
                return status
            })
        })

        // 初始化
        const init = () => {
            nextTick(() => updateScrollTop())
        }

        const pageScrollbarRef = ref(null)
        const functionItemRef = ref({})
        const setFunctionItemRef = (el, actionName) => {
            functionItemRef.value[actionName] = el
        }
        // 更新滚动条位置，定位到选中的功能位置
        const updateScrollTop = () => {
            let top = 0
            let dom = functionItemRef.value?.[eventData.value.action] || null
            while((dom !== pageScrollbarRef.value?.$el) && !!dom) {
                top += dom?.offsetTop || 0
                dom = dom.offsetParent
            }
            pageScrollbarRef.value.setScrollTop(top - 40)
        }

        // 选中功能项
        const onSelectFunction = data => {
            // 清除之前的点击事件属性
            deleteClickEvent(eventData.value)
            // 添加选中的点击事件属性
            Object.assign(eventData.value, data.addData)
        }

        return {
            eventData,
            functionList,

            init,
            pageScrollbarRef,
            setFunctionItemRef,
            updateScrollTop,

            onSelectFunction
        }
    }
})
</script>

<style lang="less" scoped>
@import './function-setting.less';
</style>